/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { getLeagueMangeList } from '@/services/qj/ChargeCheck';
import { ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { Button, message, Popover } from 'antd';
import { formatAgency } from '@/components/_pages/qj/AreaManage';
import { PlusOutlined } from '@ant-design/icons';
import AreamanageDrawer from '@/components/_pages/qj/AreaManage/components/AreamanageDrawer';
import KbPreViewPopover from '@/components/KbPreViewPopover';

const AreaManage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [searchType, setSearchType] = useState<string>('league_name');

  const undateList = () => {
    actionRef.current?.reload();
  };

  const valueEnum = {
    league_name: '加盟商名称',
    contacts_name: '联系人姓名',
    contacts_mobile: '联系电话',
  };

  const onChange = (value: string) => {
    console.log(value, '-value');
    setSearchType(value);
  };

  const getList = (values: any) => {
    const { current: page, pageSize, keywords, ...rest } = values;
    return getLeagueMangeList({ page, pageSize, [searchType]: keywords, ...rest }).then(
      ({ code, data, msg }) => {
        const list = (Array.isArray(data?.list) ? data.list : []).map(
          (item: any, index: number) => ({
            ...item,
            order: ((page || 1) - 1) * (pageSize || 0) + index + 1,
          }),
        );
        if (code == 0) {
          return {
            data: list,
            total: data.total,
          };
        } else {
          message.error(msg);
          return {
            data: [],
            total: '',
          };
        }
      },
    );
  };

  const columns: ProColumns<{
    league_id: string;
    league_name: string;
    league_type: string;
    create_time: string;
    contacts_name: string;
    contacts_mobile: string;
    mobile: string;
    address: string;
    league_area: string;
    user_id: string;
    [name: string]: string;
  }>[] = [
    {
      title: '',
      dataIndex: 'keywords',
      hideInTable: true,
      renderFormItem: () => (
        <ProFormText
          addonBefore={
            <ProFormSelect
              noStyle
              width={50}
              valueEnum={valueEnum}
              fieldProps={{ value: searchType, allowClear: false, onChange }}
            />
          }
        />
      ),
    },
    {
      title: 'ID',
      dataIndex: 'league_id',
      align: 'center',
      search: false,
    },
    {
      title: '绑定手机号',
      dataIndex: 'mobile',
      align: 'center',
      search: false,
      render: (_, record) => {
        const { mobile, regiment_id } = record;
        return (
          <KbPreViewPopover
            text={mobile}
            api='/regiment/League/getMobileByRegiment'
            queryData={{ regiment_id }}
          />
        );
      },
    },
    {
      title: '加盟商名称',
      dataIndex: 'league_name',
      align: 'center',
      search: false,
    },
    {
      title: '加盟商类型',
      dataIndex: 'league_type',
      align: 'center',
      search: false,
      valueEnum: {
        normal: '普通',
        special: '特许',
      },
    },
    {
      title: '加盟时间',
      dataIndex: 'create_time',
      align: 'center',
      search: false,
    },
    {
      title: '联系人',
      dataIndex: 'contacts_name',
      align: 'center',
      search: false,
    },
    {
      title: '联系方式',
      dataIndex: 'contacts_mobile',
      align: 'center',
      search: false,
    },
    {
      title: '地址',
      dataIndex: 'address',
      align: 'center',
      search: false,
    },
    {
      title: '加盟区域',
      dataIndex: 'league_area',
      align: 'center',
      search: false,
      renderText: (val: string) => formatAgency(val).toString(),
    },

    {
      title: '操作',
      align: 'center',
      search: false,
      fixed: 'right',
      width: '5%',
      render: (_, record) => (
        <AreamanageDrawer record={record} update={undateList}>
          <a>修改</a>
        </AreamanageDrawer>
      ),
    },
  ];

  return (
    <PageContainer>
      <DragTable>
        <ProTable<Record<string, string>>
          actionRef={actionRef}
          rowKey='id'
          request={getList}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          columns={columns}
          options={false}
          scroll={{ x: 1600 }}
          search={{
            className: 'kb-pro-table-form',
            collapseRender: () => false,
          }}
          headerTitle={
            <AreamanageDrawer update={undateList}>
              <Button type='primary' style={{ marginLeft: '10px' }} icon={<PlusOutlined />}>
                添加新加盟商
              </Button>
            </AreamanageDrawer>
          }
        />
      </DragTable>
    </PageContainer>
  );
};

export default AreaManage;
